<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>资讯管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>资讯管理列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>资讯管理列表</span>
        </div>
        <div style="display: flex">
          <el-button @click="add()" size="small" icon="el-icon-plus" type="success">发布资讯</el-button>
        </div>
      </div>
      <div class="search-box mt10">
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="请输入关键词" v-model="search.keys"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select filterable v-model="search.class_id" placeholder="请选择分类">
              <el-option v-for="(item, index) in classData" :key="index" :label="item.title"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getIndex()" icon="el-icon-search" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getClearIndex()" icon="el-icon-delete" type="info">清空筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="xcx-content">
        <!--列表-->
        <el-table border :data="tableData" stripe size="small" style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
          <el-table-column align="center" prop="cat_name" label="分类" width="140">
            <template #default="scope">
              <el-tag size="small" type="primary">{{ scope.row.cat_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="*"></el-table-column>
          <el-table-column align="center" prop="click" label="点击量" width="100"></el-table-column>
          <el-table-column align="center" prop="created_at" width="160" label="添加时间"></el-table-column>
          <el-table-column align="center" label="推荐" width="110">
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_index == 1" plain icon="el-icon-bottom" size="mini" type="success"
                @click="setIndex(scope.row)">推荐</el-button>
              <el-button v-else plain icon="el-icon-top" size="mini" type="info"
                @click="setIndex(scope.row)">未推荐</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="280">
            <template #default="scope">
              <el-button plain icon="el-icon-view" size="mini" type="success" @click="view(scope.row)">预览</el-button>
              <el-button plain icon="el-icon-edit" size="mini" type="primary" @click="edit(scope.row.id)">编辑</el-button>
              <el-button plain icon="el-icon-delete" size="mini" type="danger"
                @click="del_item(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="paging">
          <el-pagination class="left" @current-change="handleCurrentChange" :current-page="page" background
            layout="total, prev, pager, next" :total="count"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      classData: [],
      page: 0,
      count: 0,
      limit: 10,
      search: {
        keys: "",
        class_id: "",
      },
    };
  },
  //进入页面加载
  mounted: function () {
    var that = this;
    var query = that.$route.query;
    console.log(query);
    if (query.class_id) {
      that.search.class_id = Number(query.class_id);
    }
    that.getArticleClass();
    console.log(this.search);
    that.getList();
  },
  beforeRouteUpdate(to, from, next) {
    // 更新参数并重新请求数据
    this.search.class_id = Number(to.query.class_id);
    this.getList();
    next(); // 必须调用 next() 继续路由导航
  },
  methods: {
    add() {
      this.$router.push({
        path: "/article/add",
        query: {
          class_id: this.search.class_id,
        },
      });
    },

    view(row) {
      if (row.urls) {
        window.open(row.urls, '_blank');
      } else {
        this.$router.push({
          path: "/article/view",
          query: {
            id: ids,
          },
        });
      }
    },
    edit(ids) {
      this.$router.push({
        path: "/article/add",
        query: {
          id: ids,
          class_id: this.search.class_id,
        },
      });
    },

    setIndex(row) {
      var that = this;
      that.axios.post("/article/setIndex", { id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          that.getList();
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },

    /**
     * 下一页
     */
    handleCurrentChange(currentPage) {
      var that = this;
      that.page = currentPage;
      that.getList();
    },

    del_item(ids) {
      let that = this;
      this.$confirm("此操作不可逆, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.axios
          .post("/article/destroy", {
            ids: ids,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              that.getList();
            } else {
              this.$message({
                type: "info",
                message: res.msg,
              });
            }
          });
      });
    },

    getIndex() {
      this.getList();
    },

    getClearIndex() {
      this.search.keys = "";
      this.search.class_id = "";
      this.search.title = "";
      this.search.times = "";
      this.getList();
    },

    getArticleClass() {
      let that = this;
      that.axios.post("/article/getArticleClass").then((res) => {
        if (res) {
          that.classData = res.data;
        }
      });
    },

    /**
     * 获取列表
     */
    getList() {
      let that = this;
      let formData = that.search;
      var curr_page = sessionStorage.getItem("curr_page");
      that.loading = true;
      that.page = curr_page ? curr_page - 0 : that.page;
      formData.page = that.page;
      formData.limit = that.limit;
      that.axios.post("/article/index", formData).then((res) => {
        if (res) {
          that.tableData = res.data.data;
          that.count = res.data.total;
          that.page = curr_page ? curr_page : that.page;
          curr_page ? sessionStorage.removeItem("curr_page") : "";
          that.loading = false;
        }
      });
    },
  },
};
</script>
<style></style>